﻿<template>
  <el-dialog title = '仪表板配置预览' width = '98%' append-to-body top = '20px'
  :visible.sync = 'previewDashboardVisible' @close = 'closePreviewDialog'>
    <div v-loading = 'loading' class = 'preview_dialog'>
      <template v-if = 'formData && previewDashboardVisible'>
        <template v-for = "item in formData.list">
          <!-- 栅格布局时 -->
          <template v-if = "item.type == 'grid'">
            <el-row :key = "item.key" type = "flex" :gutter = "item.options.gutter ? item.options.gutter : 0"
            :justify = "item.options.justify" :align = "item.options.align">
              <el-col v-for = "(col, colIndex) in item.columns" :key = "colIndex" :span = "col.span">
                <template v-for = "citem in col.list">
                  <BiDashboardMenuItem :element = 'citem' :key = 'citem.key'></BiDashboardMenuItem>
                </template>
              </el-col>
            </el-row>
          </template>
          <!-- tabs标签页时 -->
          <template v-else-if = "item.type == 'tabs'">
            <el-tabs :type = "item.options.tabType" :stretch = "item.options.stretch" :key = "item.key">
              <el-tab-pane v-for = "(tabItem, tabIndex) in item.tabList" :key = "tabIndex" :label = "tabItem.label">
                <template v-for = "el in tabItem.list">
                  <!-- 为栅格布局时 -->
                  <template v-if = "el.type == 'grid'">
                    <el-row :key = "el.key" type = "flex" :gutter = "el.options.gutter ? el.options.gutter : 0"
                    :justify = "el.options.justify" :align = "el.options.align">
                      <el-col v-for = "(col, colIndex) in el.columns" :key = "colIndex" :span = "col.span">
                        <template v-for = "citem in col.list" >
                          <BiDashboardMenuItem :element = 'citem' :key = 'citem.key'></BiDashboardMenuItem>
                        </template>
                      </el-col>
                    </el-row>
                  </template>
                  <!-- 其它组件 -->
                  <template v-else>
                    <BiDashboardMenuItem :element = 'el' :key = 'el.key'></BiDashboardMenuItem>
                  </template>
                </template>
              </el-tab-pane>
            </el-tabs>
          </template>
          <template v-else>
            <BiDashboardMenuItem :element = 'item' :key = 'item.key'></BiDashboardMenuItem>
          </template>
        </template>
      </template>
    </div>
  </el-dialog>
</template>

<script src = './biPreview.js'></script>

<style lang = "scss" scoped>
.preview_dialog {
  width: 100%;
  max-height: 800px;
  overflow: hidden;
  overflow-y: auto;
  &::-webkit-scrollbar{
    width: 6px;
    height: 8px;
    cursor: pointer;
  }
  &::-webkit-scrollbar-track{
    background: #999;
    border-radius: 2px;
  }
  &::-webkit-scrollbar-thumb{
    background: #666;
    border-radius: 6px;
  }
  &::-webkit-scrollbar-thumb:hover {
    background: #666;
  }
}
@media (max-height: 760px) {
  .preview_dialog {
    max-height: 500px;
  }
}
</style>
